<template>
  <view class="form" style="padding-top: 0">
    <view class="idCardPanel">
      <view class="idCardPanel_span" v-on:click="onChooseImage(1)">
        <view class="idCardPanel_span_center">
          <image v-if="idCardFUrl" :src="idCardFUrl" mode="heightFix"/>
          <image v-else src="/static/img/icon/idCard_z.png" mode="heightFix"/>
        </view>
        <view class="idCardPanel_span_label">身份证正面</view>
      </view>
      <view class="idCardPanel_span" v-on:click="onChooseImage(2)">
        <view class="idCardPanel_span_center">
          <image v-if="idCardBUrl" :src="idCardBUrl" mode="heightFix"/>
          <image v-else src="/static/img/icon/idCard_f.png" mode="heightFix"/>
        </view>
        <view class="idCardPanel_span_label">身份证反面</view>
      </view>
    </view>
    <!--      国籍-->
    <view class="form_li">
      <view class="form_li_label">国籍（地区）</view>
      <view class="form_li_value">
        <input value="中国大陆" disabled>
      </view>
    </view>
    <!--      真实姓名-->
    <view class="form_li">
      <view class="form_li_label"><font>*</font>真实姓名</view>
      <view class="form_li_value">
        <input v-model="form.realName" placeholder="请输入真实姓名">
      </view>
    </view>
    <!--      证件类型-->
    <view class="form_li">
      <view class="form_li_label">证件类型</view>
      <view class="form_li_value">
        <input value="身份证" disabled>
      </view>
    </view>
    <!--      证件号码-->
    <view class="form_li">
      <view class="form_li_label"><font>*</font>证件号码</view>
      <view class="form_li_value">
        <input v-model="form.idCard" placeholder="请输入证件号码">
      </view>
    </view>
    <view class="footerBtn">
      <view class="footerBtn_center">
        <button type="primary" class="footerBtn_center_btn" v-on:click="onSubmit" v-if="form.status !== 2">完成</button>
        <button type="primary" class="footerBtn_center_btn" disabled  v-else>审核中</button>
      </view>
    </view>
  </view>
</template>
<script>

export default {
  components: {},
  data() {
    return {
      form: {
        idCard: null,
        realName: null,
        cardType: "idCard",
        country: "china"
      },
      idCardF: null,
      idCardB: null,
      idCardFUrl: null,
      idCardBUrl: null
    }
  },
  methods: {

    /**
     * 页面加载
     **/
    async afterLoad() {
      this.getUserDetail()
    },
    /**
     *提交
     */
    onSubmit() {
      let self = this
      if (!self.idCardF && !self.idCardFUrl) {
        uni.showToast({
          title: '请上传身份证正面照片',
          icon: 'none'
        })
        return
      }
      if (!self.idCardB && !self.idCardBUrl) {
        uni.showToast({
          title: '请上传身份证反面照片',
          icon: 'none'
        })
        return
      }
      if (!self.form.realName) {
        uni.showToast({
          title: '请输入真实姓名',
          icon: 'none'
        })
        return
      }
      if (!self.form.idCard) {
        uni.showToast({
          title: '请输入证件号码',
          icon: 'none'
        })
        return
      }
      let personId = /^.{18}$/
      if (!personId.test(self.form.idCard)) {
        uni.showToast({
          title: '请输入正确的证件号码',
          icon: 'none'
        })
        return
      }
      let files = []
      if(self.idCardF) {
        files.push(self.idCardF)
      }
      if(self.idCardB) {
        files.push(self.idCardB)
      }

      self.$api.personAuth({
        files: files.length ? files : [{name: 'file', uri: "xxx"}],
        formData: self.form
      }, {
        loading: true
      }).then(async(res) => {
        uni.showToast({
          title: '操作成功',
        })
        uni.hideLoading();
        await self.refreshUserInfo()
        self.navigateBackAndLoad()
      }).catch(e => {
        uni.showToast({
          title: '操作失败',
        })
        uni.hideLoading();
      })
    },

    /**
     * 选择图片
     */
    onChooseImage(type) {
      let self = this;
      uni.chooseImage({
        count: 1,
        success: function (res) {
          if(type === 1) {
            self.idCardF = {
              name: "idCardF",
              uri: res.tempFilePaths[0]
            }
            self.idCardFUrl= res.tempFilePaths[0]
           } else {
            self.idCardB = {
              name: "idCardB",
              uri: res.tempFilePaths[0]
            }
            self.idCardBUrl= res.tempFilePaths[0]
          }
        },
      })
    },

    /**
     * 查询企业信息
     */
    getUserDetail () {
      let self = this
      self.$api.getUserInfo().then(res => {
        if (res.authInfo) {
          self.form = res.authInfo
        }
        if(!self.form.realName) {
          self.form.realName = res.name
        }

        self.form.status = res.status
        self.idCardFUrl = res.authInfo.idCardF
        self.idCardBUrl = res.authInfo.idCardB
      })
    }
  }
}
</script>
<style>
page {
  background: #fff;
}
</style>
<style lang="scss" scoped>
@import "../../static/css/form.scss";

.idCardPanel {
  background-color: $bg-page;
  padding: 20px 10px 40px 10px;
  display: flex;
  width: calc(100% - 20px);
  .idCardPanel_span{
    text-align: center;
    width: calc(50% - 20px);
    margin: 0 10px;
    .idCardPanel_span_center{
      image{
        max-height: 100px;
        max-width: 100%;
      }
    }
    .idCardPanel_span_label{
      font-size: 12px;
    }
  }

}
</style>
